<script setup>
import { ElMessage } from 'element-plus'
import router from '../router'
import {getUserInfo} from '../api/userInfo'
import { ref } from 'vue';

const name = ref('')

const getName = async() => {
    let result = await getUserInfo()
    name.value = result.data.name
}
getName()

const outLogin = () => {
    localStorage.removeItem('Authorization')
    ElMessage.success('退出登录成功')
    router.push('/login')
}
</script>

<template>
    <div style="height: 80px;line-height: 80px;border-bottom: 1px solid #ccc;background-color:rgb(19, 179, 232);display: flex;">
        <img src="../../public/logo.png" style="width: 218px;height: 45px;margin-top: 17.5px;margin-left: 25px;">
        <!-- <div style="width: 200px;padding-left: 30px;font-weight: bold;color: rgb(19, 179, 232);"></div> -->
        <div style="flex: 1;"></div>
        <div style="width: 150px;margin-right: 20px;">
            <el-dropdown>
                <span class="el-dropdown-link">
                    {{ name }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <!-- <el-dropdown-item>个人信息</el-dropdown-item> -->
                        <el-dropdown-item @click="outLogin">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>


<style>
.el-dropdown-link{
    color: aliceblue;
    font-size: 20px;
    margin-top: 30px;
    outline: none;
}
</style>